<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h4>解析过程</h4>
    <ol>
        <li>解析html tree</li>
        <li>解析css tree</li>
        <li>将css树和html树构建为渲染树</li>
        <li>渲染树布局layout（可再次发生，所以有reflow:回流或重排）</li>
        <li>渲染树绘制paint（可再次发生，所以有repaint:重绘）</li>
    </ol>
</section>
<section>
    <h4>第一次解析过程</h4>
    <ol>
        <li>解析html</li>
        <li>解析css</li>
        <li>加载外部样式和脚本和图片</li>
        <li>执行完脚本</li>
        <li>Dom树构建完成。触发document DOMContentLoaded</li>
        <li>图片加载完成</li>
        <li>页面加载完成。触发window onload</li>
    </ol>
</section>
<ol>
    <li>html、css是边解析、边渲染</li>
    <li>css在head中，js在body中，edge浏览器：css会阻碍html渲染</li>
    <li>css在head中，js在body中，火狐浏览器：css不会阻碍html渲染</li>
    <li>css在body中，js在body中，放在html内容后面，edge浏览器：css不会阻碍html渲染</li>
    <li>css在body中，js在body中，放在html内容后面，火狐浏览器：css不会阻碍html渲染</li>
</ol>

</body>
</html>